<template>
  <div class="BtmFoldPanel" :style="{ bottom: isFolded ? '-250px' : '8px' }">
    <div class="panel-content">
      <slot />
    </div>
  </div>
</template>
<script lang="ts" setup>
const emit = defineEmits(['closePanel']);
const props = defineProps({
  name: {
    type: String,
    default: '桃花园街道'
  },
  isHeight: {
    type: Boolean,
    default: false
  },
  isFolded: {
    type: Boolean,
    default: false
  }
});
const close = () => {
  emit('closePanel');
};
</script>
<style lang="scss" scoped>
.BtmFoldPanel {
  position: absolute;
  right: 440px;
  height: 250px;
  left: 440px;
  z-index: 22;
  overflow: hidden;
  transition: all 0.35s ease-in-out;
  background: rgba(1, 26, 63, 0.8);

  .panel-content {
    overflow: hidden;
    color: white;
  }


  .control {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px;
    cursor: pointer;
    color: white;
    background: #12305c;
    // background: linear-gradient(0deg, rgba(#12305C, 0.6), rgba(#12305C, 0.35));
    // border: 2px solid rgba($color: $borderColor, $alpha: 0.5);
    border-left: none;
    border-radius: 0 4px 4px 0;
  }
}
</style>
